<template>
  <div ref="chartVM" class="chart-container" />
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import { useChart, convertData } from '@/hooks/useGraph/index'
import {
  getGraphViewApi,
  getGraphDataApi,
  getGraphORMApi,
} from '@/api/model/graph'

export default defineComponent({
  name: 'ChartBox',
  props: {},
  setup() {
    const chartVM = ref()
    let chart = null

    onMounted(async () => {
      console.log(chartVM.value)
      chart = useChart({
        container: chartVM.value,
      })

      const { data: graphData } = await getGraphDataApi()
      const { data: graphView } = await getGraphViewApi()
      const { data: graphORM } = await getGraphORMApi()
      const data = convertData({ graphData, graphView, graphORM })
      console.log(data)
      chart.render(data)
    })
    return {
      chartVM,
    }
  },
})
</script>

<style lang="scss" scoped>
  .chart-container {

  }
</style>
